<template>
  <div class="video-wrap">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/1120_video_01">
    <div class="question">
      <div class="topic">
        <div class="title">Q: 什么是欧米伽3</div>
        <div class="answer" @click="isAns1 = 1">
          <span class="radioBox" :class="{'active':isAns1 == '1'}">
                <input type="radio" name="isTax" value="1" v-model="isAns1">
            </span> A: 一种人体必需但无法自身合成的多不饱和脂肪酸
        </div>
        <div class="answer" @click="isAns1 = 2">
          <span class="radioBox" :class="{'active':isAns1 == '2'}">
                <input type="radio" name="isTax" value="2" v-model="isAns1">
            </span> B: 欧米伽3是一种深海鱼油
        </div>
      </div>
      <div class="topic">
        <div class="title">Q: 展望生命保尔胶囊是哪一年研制出来的？</div>
        <div class="answer" @click="isAns2 = 1">
          <span class="radioBox" :class="{'active':isAns2 == '1'}">
                <input type="radio" name="isTax2" value="1" v-model="isAns2">
            </span> A: 2000年
        </div>
        <div class="answer" @click="isAns2 = 2">
          <span class="radioBox" :class="{'active':isAns2 == '2'}">
                <input type="radio" name="isTax2" value="2" v-model="isAns2">
            </span> B: 1994年
        </div>
      </div>
      <div class="topic">
        <div class="title">Q: 常吃欧米伽3有哪些好处？</div>
        <div class="answer" @click="isAns3 = 1">
          <span class="radioBox" :class="{'active':isAns3 == '1'}">
                <input type="radio" name="isTax3" value="1" v-model="isAns3">
            </span> A: 血液干净、血管软化、病症改善看的见
        </div>
        <div class="answer" @click="isAns3 = 2">
          <span class="radioBox" :class="{'active':isAns3 == '2'}">
                <input type="radio" name="isTax3" value="2" v-model="isAns3">
            </span> B: 补充维生素
        </div>
      </div>
    </div>
    <div class="submit">
      <div class="title">请填写下面信息</div>
      <div class="item">
        <label for="phone">姓名</label>
        <input type="text" name="userName" v-model="userName" placeholder="请输入您的姓名">
      </div>
      <div class="item">
        <label for="phone">电话号码</label>
        <input type="tel" name="phone" v-model="phone" placeholder="请输入您的手机号">
      </div>
      <div class="item">
        <label for="hospital">所处医院</label>
        <select name="hospital" placeholder="所属医院" v-model="hospital">
          <option value="上海东方医院南院" checked>&nbsp;&nbsp;&nbsp;&nbsp;上海东方医院南院</option>
          <option value="上海江湾医院">&nbsp;&nbsp;&nbsp;&nbsp;上海江湾医院</option>
          <option value="中西医结合医院">&nbsp;&nbsp;&nbsp;&nbsp;中西医结合医院</option>
        </select>
      </div>
      <div class="item">
        <label for="bed">科室及床位</label>
        <input type="text" placeholder="科室和床位号" v-model="bed">
      </div>
      <div class="beiju">
        <p class="header">关于配送：</p>
        <span class="des">工作日下午三点前登记，次日派送，三点后隔日派送节假日顺延</span>
        <p class="bule">注：一个手机号限领一次</p>
      </div>
      <button id="submit1" @click="submit()">提交</button>
    </div>
  </div>
</template>
<script>
import { Toast, Indicator, MessageBox } from 'mint-ui';
import { saveAnswerUserInfo } from 'api/activity';
import { checkPhone, checkZhName } from 'common/utils';
import { wxshare } from 'common/mixin';
export default {
  mixins: [wxshare],
  data() {
    return {
      isAns1: 0,
      isAns2: 0,
      isAns3: 0,
      phone: '',
      hospital: '上海东方医院南院',
      bed: '',
      userName: ''
    }
  },
  methods: {
    submit: function() {
      let data = {
        phone: this.phone,
        hospitalName: this.hospital,
        bed: this.bed,
        userName: this.userName,
        departName: '暂无' + this.isAns1 + this.isAns2 + this.isAns3
      }

      if (!checkZhName(this.userName)) {
        Toast('请输入正确的姓名,名称为2-4位汉字');
        return false
      }

      if (!checkPhone(this.phone)) {
        Toast('请输入正确的手机号', '温馨提示');
        return false
      }

      if (!this.hospital) {
        Toast('请输入所处医院', '温馨提示');
        return false
      }

      if (!this.bed) {
        Toast('请输入您的科室和床位号', '温馨提示');
        return false
      }

      Indicator.open();
      saveAnswerUserInfo(data).then((data) => {
        Indicator.close();
        if (this.isAns1 == 1 && this.isAns2 == 1 && this.isAns3 == 1) {
          this.$router.push({ path: 'confirmVideo/success' });
        } else {
          this.$router.push({ path: 'confirmVideo/fail' });
        }
      }, (msg) => {
        debugger;
        Indicator.close();
        Toast(msg, '温馨提示');
      })

    }
  }
}

</script>
<style lang="less">
.video-wrap {
  // width: 100%;
  height: 100%;
  overflow-x: hidden;
  img {
    display: block;
    width: 100%;
    vertical-align: top;
  }
  .question {
    background: url('http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/1120_video_03');
    background-size: 100% auto;
    background-repeat: no-repeat;
    .title {
      font-family: PingFangSC-Semibold;
      font-weight: bold;
      font-size: 18px;
      color: #3982bc;
      letter-spacing: -0.44px;
      text-align: left;
      padding: 10px 20px;
    }
    .answer {
      font-family: PingFangSC-Semibold;
      font-weight: bold;
      font-size: 14px;
      color: #373a3d;
      letter-spacing: -0.34px;
      text-align: left;
      margin: 6px 0 6px 34px;
      line-height: 22px;
      width: 100%;
    }
  }
  .submit {
    background: url('http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/1120_video_23.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100%;
    text-align: center;
    .title {
      font-family: PingFangSC-Semibold;
      font-weight: bold;
      font-size: 20px;
      color: #3982bc;
      letter-spacing: -0.49px;
      text-align: center;
      margin: 20px;
    }
    .item {
      line-height: 32px;
      margin: 6px 0;
      label {
        width: 126px;
        text-align: right;
        font-family: PingFangSC-Semibold;
        font-weight: bold;
        font-size: 18px;
        color: #4f5255;
        letter-spacing: -0.44px;
        float: left;
        line-height: 32px;
      }
      input,
      select {
        opacity: 0.72;
        background: #ffffff;
        border: 1px solid #979797;
        width: 172px;
        height: 32px;
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #94989b;
        letter-spacing: -0.27px;
        text-align: center;
      }
    }
    .beiju {
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #002A00;
      letter-spacing: 0.15px;
      line-height: 20px;
      text-align: left;
      margin: 0 24px;
      margin-top: 20px;
      .header {
        font-size: 18px;
      }
      .bule {
        color: #2762E7;
      }
    }
    #submit1 {
      margin: 20px auto; // margin-bottom: 40px;
      background-image: linear-gradient(-180deg, invalid gradient);
      border-radius: 10px;
      width: 281px;
      height: 54px;
      font-family: PingFangSC-Semibold;
      font-weight: bold;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: -0.58px;
      text-align: center;
      background: #3873F4;
    }
  }
  .radioBox {
    width: 12px;
    height: 12px;
    border: 2px solid #2e73b3;
    display: inline-table;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    input {
      position: absolute !important;
      opacity: 0 !important;
      width: 12px;
      height: 12px;
      top: 0;
      left: 0;
      z-index: 20;
    }
  }
  .radioBox.check {
    border-radius: 0;
  }
  .radioBox.active {
    &:after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2e73b3;
      left: 1px;
      top: 1px;
    }
  }
  .radioBox.check.active {
    &:after {
      border-radius: 0;
    }
  }
}

</style>
